<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>赠送您的卡券</title>
    <link rel="stylesheet" href="__STATIC_URL__/static/mobile/css/weui.css" />
    <style type="text/css">
        body{
            background: #F8F8F8;
        }
        .weui-navba {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            position: fixed;
            z-index: 500;
            bottom: 0;
            width: 100%;
            background-color: #FAFAFA;
        }
        .weui-media-box__thumb{
            width: 100%;
            height: 100%;
        }
        .weui-navbar__item.weui-bar__item_on{
            background: #fff;
            color: #FD807A;
        }
        .text-right{
            text-align: right;
            color: #FF8079;
        }
        .weui-navba{
            background: #fff;
        }
        .weui-tab{
            width: 95%;
            margin: 10px auto;
        }
        .weui-navbar{
            border-radius:8px;
            border: 1px solid #E0E0E0;
        }
        .item-top{
            padding: 4px 0;
            font-size: 14px;
        }
        .item-top:nth-child(1){
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        .item-top:nth-child(3){
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }
        .weui-bar__item_active{
            background: #669EEB;
            color: #fff;
        }
        .minecard{
            padding-top: 50px;
        }
    </style>
</head>
<body>
<div class="container" id="container">
    <div class="page navbar js_show">
        <div class="page__bd" style="height: 100%;">
            <div class="weui-tab">
                <div class="weui-tab__panel" style="display: none;">
                    <div class="weui-panel__bd">
                        <!--所有会员卡-->
                        {volist name="cardv" id="cardv"}
                        <a href="{:url('carduser/opencard',['card_id'=>$cardv['card_id']])}" class="weui-media-box weui-media-box_appmsg">
                            <div class="weui-media-box__hd">
                                <img class="weui-media-box__thumb" src="{$cardv.logo_url}" alt="">
                            </div>
                            <div class="weui-media-box__bd">
                                <h4 class="weui-media-box__title">{$cardv.title}</h4>
                            </div>
                        </a>
                        {/volist}
                        
                        <!--所有卡券-->

                    </div>
                </div>
                <div class="weui-tab__panel" >
                    <div class="weui-tab">
                        <div class="weui-navbar">
                            <div class="weui-navbar__item item-top weui-bar__item_active">
                                我的卡
                            </div>
                            <div class="weui-navbar__item item-top">
                                我的券
                            </div>

                        </div>
                        <div class="minecard">
                            <!--我得会员卡-->
                            {volist name="mecard" id="cardm"}
                                <a href="{:url('carduser/opencard', ['card_id'=>$cardm['card_id'],'code'=>$cardm['code']])}" class="weui-media-box weui-media-box_appmsg">
                                    <div class="weui-media-box__hd">
                                        <img class="weui-media-box__thumb" src="{$cardm.card_id|cardgetinfo=###,0,0}" alt="">
                                    </div>
                                    <div class="weui-media-box__bd">
                                        <h4 class="weui-media-box__title">{$cardm.card_id|cardgetinfo=###,0,1}</h4>
                                    </div>
                                </a>
                            {/volist}
                        </div>
                        <div class="minecard" style="display: none;">
                            <!--我得卡券-->
                            {volist name="mevou" id="cardv"}
                                <a href="{:url('carduser/opencard', ['card_id'=>$cardv['card_id'],'code'=>$cardv['code']])}" class="weui-media-box weui-media-box_appmsg">
                                    <div class="weui-media-box__hd">
                                        <img class="weui-media-box__thumb" src="{$cardv.card_id|cardgetinfo=###,1,0}" alt="">
                                    </div>
                                    <div class="weui-media-box__bd">
                                        <h4 class="weui-media-box__title">{$cardv.card_id|cardgetinfo=###,1,1}</h4>
                                    </div>
                                </a>
                            {/volist}
                        </div>
                    </div>
                </div>
                <div class="weui-navba">
                    <div class="weui-navbar__item item-bottom">
                        卡券中心
                    </div>
                    <div class="weui-navbar__item item-bottom weui-bar__item_on">
                        我的卡券
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="__STATIC_URL__/static/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('.item-bottom').on('click', function() {
            var index = $(this).index();
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
            $(".weui-tab__panel").css("display","none").eq(index).css("display","block");
        });
        $('.item-top').on('click', function() {
            var index = $(this).index();
            $(this).addClass('weui-bar__item_active').siblings('.weui-bar__item_active').removeClass('weui-bar__item_active');
            $(".minecard").css("display","none");
            $(".minecard").eq(index).css("display","block");

        });
        $(".weui-tab__panel dl").click(function(){
            window.location.href="../cardshop/goodsdetail.html";
        })
    });
</script>
</html>
